<template>
  <el-form class="BaseForm" ref="form" :model="prompt" label-width="88px" label-position="top">
    <div class="formContent">
      <div class="formTitle">模特图片</div>
      <el-form-item class="formItem">
        <ImagePicker TipsTxt="请上传需要替换人脸的图片" ToPlatform="No-ComfyUI" @change="ChangeModelImg"  :DefaultImageUrl="modelImageUrl"></ImagePicker>
      </el-form-item>
      <div class="formTitle">人脸图片</div>
      <el-form-item class="formItem">
        <ImagePicker TipsTxt="请上传需要使用的人脸图片" ToPlatform="No-ComfyUI" @change="ChangeFacelImg" :DefaultImageUrl="faceImageUrl"></ImagePicker>
      </el-form-item>
    </div>
    <div class="formBottomBar">
      <div class="content">
        <div class="tips">描述建议<br />图片主体 + 环境背景 + 图片风格</div>
      </div>l
      <el-button round class="FormBtn" @click="onSubmit" v-loading="nowLoading"><el-icon class="icon"><Brush /></el-icon><span class="txt">生成图片</span></el-button>
    </div>
  </el-form>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
<style>
</style>
<script>
import WebRequest from '../../unit/request.js'
import PromptSession from '../element/PromptSession.vue'
import ImagePicker from '../element/ImagePicker.vue'
import OS from '../../unit/OS.js'
export default {
  name: 'FaceSwap',
  components: { PromptSession,ImagePicker },
  props: {
    src: '',
    title: '',
    date: '',
    prompt: {},
    modelImageUrl: '',
    faceImageUrl: '',
    sourceImageDepotId:''
  },
  data () {
    return {
      faceImage:'',
      baseImage:'',
      sourceImageDepotIdVal:'',
      nowLoading:false
    }
  },
  mounted(){
  },
  methods: {
    onSubmit(e){
      this.nowLoading = true;
      this.$emit('startGenerate');
      WebRequest.SwapFace.UploadTemplate({
        imgUrl:this.baseImage,
        callback:(templateRes)=>{
          console.log(templateRes)
          WebRequest.PreConsumerPoint({
            serviceType:3,
            callback: (res) => {
              console.log(res);
              if(res.data.errCode == 10000){
                var coseId = res.data.data.id;
                var sourceImageDepotId = this.sourceImageDepotId//this.sourceImageDepotIdVal
                if(this.sourceImageDepotIdVal != ''){
                  sourceImageDepotId = this.sourceImageDepotIdVal
                }
                /*{"operationId":"3",
                "operationName":"素材换脸",
                "originalImage":"https://picture.2beauti.com/prometheus/20240385/1711360655281.png",
                "faceImage":"https://picture.2beauti.com/prometheus/20240385/1711361396620.PNG",
                "resultImage":""}
                */
                var extend = OS.GetFormSetting({
                  operationId: "3",
                  operationName: '素材换脸',
                  originalImage:this.baseImage,
                  facelImage:this.faceImage,
                  resultImage:""
                })
                WebRequest.SwapFace.MergeImage({
                  costId:coseId,
                  imgUrl:this.faceImage,
                  templateId:templateRes.data.data.templateId,
                  sourceImageDepotId:sourceImageDepotId,
                  extendValue:extend,
                  callback: (e) => {
                    if(e.data.errCode == 10000){
                      var resultImgUrl = e.data.data.imageURL
                      this.$emit('ResultCalled',resultImgUrl)
                      this.nowLoading = false
                      /*
                      WebRequest.SaveToLibrary({
                        tool: 3,
                        imageURL: resultImgUrl,
                        callback: (_e) => {
                          this.nowLoading = false
                          if(e.data.errCode == 10000){
                          }else{
                            console.log('保存图库失败',e)
                          }
                        },
                        error: (_e) => {
                          this.nowLoading = false
                          console.log('保存图库接口请求异常',e)
                        }
                      })*/
                    }else{
                          this.nowLoading = false
                      console.log('请求生图失败',e)
                    }
                  },
                  error: (e) => {
                    this.nowLoading = false
                    console.log('请求生图接口请求异常',e)
                  }
                })
              }else{
                this.nowLoading = false
                console.log('扣费失败',res)
              }
            },
            error: (e) => {
                this.nowLoading = false
                console.log('扣费接口请求异常',res)
            }
          })
        },
        error: (res) => {
          console.log('UploadTemplate fail', res)
        }
      })
    },
    ChangeModelImg (e) {
      console.log(e);
      if(e.fileName && e.fileName != null && e.fileName != ''){
        this.baseImage = e.fileName
      }else{
        this.baseImage = e.imageUrl
      }
      this.sourceImageDepotIdVal = e.sourceImageDepotId
    },
    ChangeFacelImg (e) {
      console.log(e);
      if(e.fileName && e.fileName != null && e.fileName != ''){
        this.faceImage = e.fileName
      }else{
        this.faceImage = e.imageUrl
      }
    }
  }
}
</script>
